<template>
  <div class="title-container" :style="defaultStyle" :class="isActiveClass">
    <div class="title-header" :style="contentStyle">
      <div class="title" :style="itemStyle">{{ contentData.content || '内容' }}</div>
      <div class="btn" :style="btnStyle">添加</div>
    </div>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    contentData: {
      type: Object,
      default: () => ({})
    },
    isActiveClass: {
      type: String
    }
  })

  const defaultStyle = computed(() => {
    const s = props.contentData.style
    return {
      paddingTop: s.paddingTop,
      paddingLeft: s.paddingLeft,
      paddingRight: s.paddingRight,
      paddingBottom: s.paddingBottom
    }
  })

  const contentStyle = computed(() => {
    const s = props.contentData.style
    return {
      borderRadius: s.borderRadius,
      backgroundColor: s.backgroundColor,
      overflow: 'hidden'
    }
  })

  const itemStyle = computed(() => {
    const s = props.contentData.itemStyle || {}
    return {
      fontSize: s.fontSize ? s.fontSize + 'px' : '15px',
      color: s.color,
      fontWeight: s.fontWeight
    }
  })

  const btnStyle = computed(() => {
    const s = props.contentData.itemStyle.btnStyle || {}
    return {
      color: s.color,
      backgroundColor: s.backgroundColor
    }
  })
</script>

<style scoped lang="scss">
  .title-container {
    width: 100%;
    box-sizing: border-box;

    .title-header {
      position: relative;
      box-sizing: border-box;
      padding: 8px 14px;

      display: flex;
      align-items: center;
      justify-content: space-between;

      .btn {
        border-radius: 6px;
        padding: 8px 16px;
        font-size: 12px;
      }
    }
  }

  .active-component {
    border: 1px solid var(--el-color-primary);
  }
</style>
